刷题的时候遇到了这玩意不是很懂，记录一下

一、原题

题目内容和答案如下
JK4%Z2~ZX_[_XNXQ8]E{6V9.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .options li {
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: solid 1px #ddd;
      }

      .items li {
        width: 405px;
        height: 405px;
        display: none;
        border: solid 1px #ddd;
      }
    </style>
  </head>
  <body>
    <ul class='options'>
      <li data-type="0" style='background-color: #25bb9b;'>题库</li>
      <li data-type="1">面试</li>
      <li data-type="2">学习</li>
      <li data-type="3">求职</li>
    </ul>
    <ul class='items'>
      <li style="display: block;">牛客题库，包含编程题、选择题等</li>
      <li>为你的面试提供一站式服务</li>
      <li>校招学习来牛客</li>
      <li>求职中有什么难题，可以联系我们</li>
    </ul>

    <script>
      var options = document.querySelector('.options');
      var optionItems = [].slice.call(document.querySelectorAll('.options li'));
      var items = [].slice.call(document.querySelectorAll('.items li'));
      // 补全代码
      options.onclick = function (event) {
          optionItems.forEach((item) => {
              item.style.backgroundColor = '#fff'
          })
          event.target.style.backgroundColor = '#25bb9b'
          items.forEach((item) => {
              item.style.display = 'none'
      
          })
          items[event.target.dataset.type].style.display = 'block'
      }
    </script>
  </body>
</html>

二、作用

其作用可以将一个类数组对象转换为数组对象，题目中querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回了一个 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
javascirpt的类数组对象可以像数组一样使用for循环遍历，但是却不能调用数组原型链的方法，为了让类数组对象可以像数组对象一样调用push，pop等方法，可以将类数组对象转成数组对象。